본문으로 건너뛰기

Next js를 배워보자 #5 - Pre-rendering과 Data Fetching

이번장에선 외부 데이터를 어떻게 fetching하는지 살펴본다.

이번 장에서는​

  • Next.js의 pre-rendering 기능을 소개
  • Static Generation vs Server-side Rendering
  • getStaticProps 사용법과 팁
  • 요청 시간에 데이터 패칭하는 getServerSideProps
  • Client-side Rendering과 SWR

Pre-rendering​

Next.js는 기본적으로 모든 페이지를 pre-rendering한다.
이것은 각 HTML 페이지가 build 시점 또는 요청 시점에 생성된다는 것을 의미한다.

  • 더 나은 성능
  • SEO에 유리
  • 필요한 최소한의 JS로 구성됨
  • Hydration 과정을 통해 동적 인터랙션 제공

Pre-rendering vs No Pre-rendering​

pre-rendering
no-pre-rendering

Pre-rendering의 두 가지 형태​

  • Static Generation: 빌드 시 HTML을 생성, 캐싱되어 빠름
  • Server-side Rendering: 요청 시마다 HTML을 생성

static
ssr

언제 어떤 방식?​

Static Generation 권장

  • 마케팅 페이지
  • 블로그 포스트
  • 이커머스 상품
  • 문서 페이지 등

SSR 필요 조건

  • 자주 업데이트되는 콘텐츠
  • 요청마다 변하는 콘텐츠

getStaticProps 사용하기​

정적 생성 + 외부 데이터 조합 가능
파일시스템 또는 API에서 데이터 불러와 페이지 빌드

export async function getStaticProps() {
  const data = ... // fetch
  return {
    props: {
      allPostsData: data
    }
  }
}
  • 프로덕션에선 build time
  • 개발환경에선 요청마다 실행됨

예제: Markdown 블로그 포스트 읽기​

import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'

export function getSortedPostsData() {
  const dir = path.join(process.cwd(), 'posts')
  const filenames = fs.readdirSync(dir)
  return filenames.map(name => {
    const id = name.replace(/\.md$/, '')
    const content = fs.readFileSync(path.join(dir, name), 'utf8')
    const { data } = matter(content)
    return { id, ...data }
  }).sort((a, b) => (a.date < b.date ? 1 : -1))
}

요청 시 데이터 패칭 - getServerSideProps​

export async function getServerSideProps(context) {
  const data = await fetch('...')
  return { props: { data } }
}
  • 요청마다 실행됨
  • SEO와 최신성 필요할 때 사용

클라이언트 사이드 패칭​

  • 정적 페이지 + 동적 데이터 fetch
  • 로그인 대시보드 등에서 적합
  • 라이브러리 추천: SWR
import useSWR from 'swr'

function Profile() {
  const { data, error } = useSWR('/api/user', fetch)
  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

마무리​

  • getStaticProps: 빌드 시점에 데이터 fetch
  • getServerSideProps: 요청 시점에 fetch
  • SWR: 클라이언트에서 fetch

다음 장에서는 동적 라우팅을 배워보자!